<template>
  <div>
    <div class="center">
      <div class="xuxian">
        <div>
          <span style="font-size: 35px"><strong>精品工程</strong></span>
          <span style="font-size: 18pt; color: gray"
            ><strong></strong>PROJECT</span
          >
          <img src="@/assets/xuxian.png" alt="" />
        </div>
      </div>
      <div class="jingpin">
        <p>精品工程</p>
        <p>PROJECT</p>
      </div>
      <div class="tupian">
        <div>
          <img src="/src/GongCheng/gc1.jpeg" />
          <span>现场工作的视频</span>
        </div>
        <div>
          <img src="/src/GongCheng/gc2.jpeg" />
          <span>拆炉机维修</span>
        </div>
        <div>
          <img src="/src/GongCheng/gc3.jpeg" />
          <span>拆炉机维修</span>
        </div>
        <div>
          <img src="/src/GongCheng/gc4.jpeg" />
          <span>拆炉机维修</span>
        </div>
        <div>
          <img src="/src/GongCheng/gc5.jpeg" />
          <span>拆炉机维修</span>
        </div>
        <div>
          <img src="/src/GongCheng/gc6.jpeg" />
          <span>拆炉机维修</span>
        </div>
        <div>
          <img src="/src/GongCheng/gc7.jpeg" />
          <span>拆炉机维修</span>
        </div>
        <div>
          <img src="/src/GongCheng/gc8.jpeg" />
          <span>拆炉机维修</span>
        </div>
        <div>
          <img src="/src/GongCheng/gc9.jpeg" />
          <span>拆炉机维修</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.xuxian {
  margin-top: 50px;
  display: flex;
}
.xuxian > div {
  margin: 0 auto;
  white-space: nowrap//强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行。;
}
.xuxian > div > img {
  display: inline-block;
}
.xuxian > div > span {
  margin: 10px;
}
.center {
  width: 1300px;
  margin: 0 auto;
}
.jingpin {
  margin-top: 30px;
}
.jingpin > p {
  margin-left: 118px;
  width: 200px;
  height: 50px;
  line-height: 50px;
  color: white;
  font-size: 23px;
  background-color: #1e61ba;
  text-align: center;
}
.tupian {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 400px;
  margin-top: -120px;
}
.tupian div {
  background-color: #1e61ba;
  width: 300px;
  text-align: center;
  margin: 15px;
  overflow: hidden;
}
.tupian > div > img {
  width: 100%;
  height: 250px;
  &:hover {
    transform: scale(1.1);
    transition: 0.5s;
  }
}

.tupian > div > span {
  display: block;
  font-size: 22px;
  padding: 8px;
  color: white;
}
</style>
